<template>
  <div v-if="show" :style="style" id="overlay">
    <div class="title">{{ title }}</div>
    <div class="close" @click="closehandle"></div>
    <div id="overlayb" ref="overlayb"></div>
  </div>
</template>

<script>
import map from "../../assets/map";
import axios from "axios";
import IP from "../../assets/ipconf";
export default {
  name: "overlayVideo",
  data() {
    return {
      title: "",
      url: {},
      style: {},
      show: false,
      videoController: null,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      axios.get(IP.videoPlatUrl + "/scooper-video/conf/data").then((res) => {
        let conf = res.data;
        let videoOpts = {
          //初始化时的界面显示的分屏树
          windows: 1,
          //共有哪几种分屏
          windowsArr: [1, 4, 9, 16],
          //总的窗口数
          windowsNum: 1,
          conf: {
            user: conf["video.username"],
            passwd: conf["video.password"],
            ip: conf["video.ip"],
            port: conf["video.port"],
            janusUrl: IP.janusUrl,
          },
          //码流类型，默认0
          streamType: conf["video.stream"],
          //是否截屏
          capImage: conf["video.cap.image"] === "true",
          //截屏默认保存的地址
          videoCapImagePath: conf["video.cap.image.path"],
        };
        //轮巡的时间，单位秒
        conf["video.poll.time"] &&
          (videoOpts.pollInterval = conf["video.poll.time"]);

        this.videoController = new scooper.video($("#overlayb"), videoOpts);

        if (this.videoController.isPlaying(this.url) != -1) {
          console.log("该视频正在播放！");
          return;
        }
        let pf = this.videoController.playByOrderExpandWindow(
          this.url,
          this.url,
          {
            name: this.url,
          }
        );
        if (pf) {
        }
      });
    });
  },
  methods: {
    closehandle() {
      this.show = false;
      map.clearPointDx();
    },
    stopPlay() {
      this.videoController.close(0);
    },
  },
};
</script>

<style scoped>
#overlay {
  width: 500px;
  height: 440px;
  position: relative;
  color: #fff;
  font-size: 16px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(~@/assets/image/map/videobg.png);
}
.title {
  color: #f0e039;
  position: absolute;
  left: 121px;
  top: 87px;
}
.close {
  width: 35px;
  height: 35px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(~@/assets/image/map/right-top-back.png);
  position: absolute;
  right: 92px;
  top: 75px;
}
#overlayb {
  width: 310px;
  height: 180px;
  top: 94px;
  position: absolute;
  left: 54px;
  z-index: 999;
}
</style>